<template>
  <div class="p-category">
    <dl class="classic">
      <dt>分类</dt>
      <dt>全部</dt>
      <dd
        v-for="(item, index) of types"
        :key="index"
      >
        <i-select
          :name="item.type"
          :list="item.module"
        />
      </dd>
    </dl>

    <dl class="classic">
      <dt>分类</dt>
      <dt>全部</dt>
      <dd
        v-for="(item, index) of areas"
        :key="index"
      >
        <i-select 
          :name="item.type"
          :list="item.module"
        />
      </dd>
    </dl>
  </div>
</template>

<script>
import ISelect from './iselect.vue'

export default {
  components: {
    ISelect
  },
  props: {
    types: {
      type: Array,
      default() {
        return []
      }
    },
    areas: {
      type: Array,
      default() {
        return []
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  .p-category
    margin-top 10px
    padding 15px 20px 0
    background #ffffff
    border 1px solid #e5e5e5
    line-height 20px
    color #333
    font-size 14px
    font-weight 500
    cursor default
    .classic
      display flex
      padding-bottom 10px
      &:fist-child
        dd
          border-bottom 1px solid #dddddd
      dt
        width 80px
        &:nth-child(2)
          width 40px
          height 22px
          line-height 22px
          box-sizing border-box
          margin-right 40px
          border-radius 100px
          background #13d1be
          color #ffffff
          text-align center
          cursor pointer
        &:nth-child(1)
          dd
            border-bottom 1px solid #dddddd

</style>
